

<template>
  <!-- //组件的结构 -->
  <div class="p">
    <h2>学校地址 {{ address }}</h2>
    <h2>学校名称 {{ schoolName }}</h2>
    <button @click="click">这</button>
  </div>
</template>



<script>
///交互相关的
// Vue.extend可以省略
// const school = Vue.extend({
//   data() {
//     return {
//       schoolName: "尚硅谷",
//       address: "背景长",
//     };
//   },
//   methods: {
//     click() {
//       alert("asdas");
//     },
//   },
// });
// 三种暴露方式      1.分别暴露export const school = Vue.extend({
// 2 export（school） 统一暴露
// 3 默认暴露 export default school;
// export default school;
export default {
  name: School,
  data() {
    return {
      schoolName: "尚硅谷",
      address: "背景长",
    };
  },
  methods: {
    click() {
      alert("asdas");
    },
  },
};
</script>


<style>
/* 组建的样式 */
.p {
  padding: 10%;
  background-color: aqua;
}
</style>

